<template>
  <div class="q-pa-md q-gutter-sm">
    <t-btn push color="teal" label="Change image" @click="refresh" />

    <t-img
      alt="我是图片"
      :src="url"
      imgSrc="https://resource.teld.cn/teldimage/107/82ed17ba7bf444a09a31a03761b38ac7.png"
      width="120px"
      height="100px"
      style="margin: 100px"
      :visible="true"
      :tabIndex="1"
      @error="onError"
      @click="onClick"
      @load="onLoad"
    >
    </t-img>

		 <t-img
      alt="我是图片222"
      src=""
      width="150px"
      height="150px"
      style="margin: 100px"
      :visible="true"
      :tabIndex="1"
      @error="onError"
      @click="onClick"
      @load="onLoad"
    >
    </t-img>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      // 一开始是打不开的
      const url = ref('https://picsum.photos/500/30011');

      return {
        url,
        refresh() {
          url.value = 'https://picsum.photos/500/300?t=' + Math.random();
        },
        onError(err) {
          console.log('======加载图片失败', err);
        },
        onClick() {
          console.log('======点击图片');
        },
        onLoad() {
          console.log('======加载图片成功');
        },
      };
    },
  };
</script>
